<template>
  <div class="upperTemplate">
    <el-row class="handleBox">
      <el-col :span="per.left">
        <!-- 操作按钮区域 -->
        <slot name="buttonArea"></slot>
      </el-col>
      <el-col :span="per.right">
        <div class="handleIconBox" v-if="noIcon === false">
          <el-popover
            placement="bottom"
            trigger="click"
            popper-class="icon_porper"
          >
            <div class="export_porper">
              <!-- 导出操作区域 -->
              <slot name="exportArea"></slot>
            </div>
            <i
              class="iconfont icon-export"
              v-if="exportIcon"
              title="导出"
              slot="reference"
              @click="exportData"
            ></i>
          </el-popover>
          <el-popover
            placement="bottom"
            trigger="click"
            popper-class="icon_porper"
          >
            <div class="import_porper">
              <!-- 导入操作区域 -->
              <slot name="importArea"></slot>
            </div>
            <i
              class="iconfont icon-import"
              v-if="importIcon"
              title="导入"
              @click="importData"
              slot="reference"
            ></i>
          </el-popover>
          <el-popover
            :placement="searchPlace"
            trigger="click"
            popper-class="icon_porper"
          >
            <div class="search_porper">
              <!-- 悬浮搜索区域 -->
              <slot name="searchArea"></slot>
              <div style="text-align:center;" v-if="!noSearchButton">
                <el-button type="primary" size="mini" @click="search"
                  >查询</el-button
                >
                <el-button size="mini" @click="clear">重置</el-button>
              </div>
            </div>
            <i
              class="iconfont icon-sousuo"
              v-if="searchIcon"
              title="搜索"
              slot="reference"
            ></i>
          </el-popover>
          <el-popover
            placement="bottom"
            trigger="click"
            popper-class="icon_porper"
          >
            <div class="operation_checkbox">
              <!-- 是否隐藏表格某列 -->
              <slot name="columnHide"></slot>

              <!-- <el-checkbox-group v-model="checkList">
                <el-checkbox
                  v-for="item in textData"
                  :label="item.label"
                  :key="item.prop"
                  >{{ item.label }}
                </el-checkbox>
              </el-checkbox-group> -->
            </div>
            <i
              class="iconfont icon-liebiaoshezhi"
              title="列表设置"
              slot="reference"
              v-if="configIcon"
            ></i>
          </el-popover>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    // 自定义左右占比
    per: {
      type: Object,
      default: () => {
        return {
          left: 18,
          right: 6
        };
      }
    },
    // 搜索icon按钮是否展示
    searchIcon: {
      type: Boolean,
      default: true
    },
    // 设置table列表隐藏显示icon按钮是否展示
    configIcon: {
      type: Boolean,
      default: true
    },
    // 设置列表导出icon按钮是否展示
    exportIcon: {
      type: Boolean,
      default: false
    },
    // 设置列表导入icon按钮是否展示
    importIcon: {
      type: Boolean,
      default: false
    },
    // 不显示搜索重置，用于单个搜索功能
    noSearchButton: {
      type: Boolean,
      default: false
    },
    // 搜索框悬浮方向，单个搜索时需要改变
    searchPlace: {
      type: String,
      default: "bottom"
    },
    // 是否使用右侧icon悬浮功能项
    noIcon: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    search() {
      this.$emit("search");
      console.log("调用搜索");
    },
    clear() {
      this.$emit("clear");
      console.log("调用重置");
    },
    importData() {
      console.log("调用导入");
      this.$emit("importData");
    },
    exportData() {
      console.log("调用导出");
      this.$emit("exportData");
    }
  }
};
</script>

<style lang="scss"  scope>
.upperTemplate {
  height: 40px;
}
.el-col {
  min-height: 1px;
}
// 页面模板
.handleBox {
  // margin: 10px 0;
  padding: 0 0 10px 0;
  vertical-align: middle;

  .handleIconBox {
    padding-top: 10px;
    float: right;
    width: 160px;
    text-align: right;
  }
}
// 右侧图标，不要和上面合并写
.handleIconBox {
  float: right;
  width: 160px;
  text-align: right;
  i {
    cursor: pointer;
    color: #98a5c0;
    font-size: 16px !important;
  }
}
.handleBox i {
  cursor: pointer;
  color: #98a5c0;
  margin: 10px 20px;
  margin-right: 1px;
}
.icon_porper {
  background: #455067;
  box-shadow: 0px 2px 5px 0px rgba(136, 144, 162, 0.5);
  opacity: 0.95;
  padding: 16px;
}
.search_porper .el-input--mini .el-input__inner {
  background: #455067;
  opacity: 0.9;

  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
// 显示隐藏列的选择框列表
.operation_checkbox .el-checkbox {
  margin: 0 0 11px 0;
  display: block;
}
// 禁用状态
.operation_checkbox .el-checkbox .is-disabled {
  color: #8890a2;
}
</style>